<script setup>
import OApageheader from '../../components/OApageheader.vue';
import {ref,reactive,onMounted,computed,watch} from 'vue';
import {ElMessage} from 'element-plus';
import apiClient from '../../api/api';
import OAMain from '../../components/OAMain.vue';
import OAdialog from '../../components/OAdialog.vue';
import { useAuthStore } from '../../stores/auth.js'; // 导入 auth 模块的 store

const authStore = useAuthStore(); // 获取 auth 模块的 store

let informs = ref([]); // 通知数据对象，用于存储通知数据
let pagination = reactive({ // 分页数据
  total: 1, // 总条数
  page: 1, // 当前页码
  pageSize: 5, // 每页显示条数
});
let dialogFormVisible = ref(false); // 对话框是否显示

let handleindex = 0; // 索引id
const onShowdialog = (index) => { // 显示对话框
  handleindex = index; // 记录处理的通知索引
  dialogFormVisible.value = true; // 显示对话框
}

const getinformspage = async (page) => {
  try {
    const res = await apiClient.get('inform/informs/', {
      params: {
        page: page,
        page_size: pagination.pageSize,
      }
    });
    pagination.total = res.data.count; // 获取总条数
    informs.value = res.data.results; 
  } catch (error) {
    ElMessage.error(error.message);
  }
};

watch(() => pagination.page, (newVal) => { // 监听分页数据变化
    getinformspage(newVal); // 重新获取分页数据
  });

onMounted(async() => { // 页面加载时，获取通知数据
  try {
    getinformspage(1); // 调用分页数据函数，初始化获取第1页的数据
  }catch (error) { 
      ElMessage.error(error.message); 
  }
})

const onSubmit = async () => { // 提交表单
  try {
    const inform = informs.value[handleindex]; // 获取处理的通知数据
    await apiClient.delete(`inform/informs/${inform.id}/`); // 删除通知
    informs.value.splice(handleindex, 1); // 删除通知
    ElMessage.success('删除成功');
    dialogFormVisible.value = false; 
  }catch (error) { 
    ElMessage.error(error.message); 
  }
}

</script>

<template>
<OAMain>
  <OApageheader content="通知列表"></OApageheader>
  <el-card>
    <!-- data必须是一个数组，prop表数组的对象，label是列标题（表头） -->
  <el-table :data="informs" style="width: 100%">   
      <el-table-column prop="title" label="标题">
        <template #default="scope">
          <!-- 未读显示小红点 -->
          <el-badge v-if="scope.row.reads.length==0" is-dot class="item">
            <router-link :to="'/inform/details/' + scope.row.id">{{ scope.row.title }}</router-link>
          </el-badge>
          <!-- 已读不显示小红点 -->
          <router-link v-else :to="'/inform/details/' + scope.row.id">{{ scope.row.title }}</router-link>
          
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="发布时间"/>
      <el-table-column label="发布者">
        <template #default="scope">
          {{ '['+ scope.row.author.department.name +']'+ scope.row.author.realname }}
        </template>
      </el-table-column>
      <el-table-column label="部门可见">
        <template #default="scope">
          <el-tag v-if="scope.row.public" type="success">公开</el-tag>
          <el-tag v-else type="info" v-for="dept in scope.row.department" :key="dept.name">{{ dept.name }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button v-if="scope.row.author.id ==authStore.user.id" @click="onShowdialog(scope.$index)" type="danger" icon="Delete" />
          <el-button v-else disabled type="default"> 无</el-button>
        </template>
      </el-table-column>

    </el-table>
    
    <!-- 分页 -->
    <template #footer>
      <el-pagination background layout="prev, pager, next" :total="pagination.total" v-model:current-page="pagination.page" :page-size="pagination.pageSize" />
    </template>
</el-card>
    
</OAMain>

<OAdialog title="详情" v-model="dialogFormVisible" @submit="onSubmit">
    <span>您确定要删除这个通知吗？</span>
</OAdialog>
</template>

<style scoped>
.el-tag {
  margin-right: 5px;
}
.el-pagination {
  justify-content: center;
}

.el-badge{
  margin-right: 5px;
  margin-top: 5px;
}
</style>
